<template>
  <!-- // 地图 -->
  <div class="homePageCards" id="homePageCards">
    <div class="full-box" v-show="show">
      <img src="../../../../assets/img/full.png" alt="">
      <span @click="fullscreen">全屏</span>
    </div>
    <div class="full">
      <div class="full-boxs">
        <img src="../../../../assets/map/red.svg" alt="">
        <span>红色预警</span>
      </div>
      <div class="full-boxs">
        <img src="../../../../assets/map/orange.svg" alt="">
        <span>橙色预警</span>
      </div>
      <div class="full-boxs">
        <img src="../../../../assets/map/yellow.svg" alt="">
        <span>黄色预警</span>
      </div>
      <div class="full-boxs">
        <img src="../../../../assets/map/blue.svg" alt="">
        <span>蓝色预警</span>
      </div>
    </div>
    <div id="map" style="width: 100%; height: 100%"></div>
  </div>
</template>
<script>
import sjccKey from "../../../../config/sjmapkey";
export default {
  name: "MapContent",
  components: {
  },
  props: {
    mapData: {
      type: Array,
      default: () => []
    }
  },
  data: function () {
    return {
      map: null,
      geo: null,
      geocodingTask: null,
      zoom: 5.8,
      show: true
    };
  },
  mounted() {
    this.init();

  },

  methods: {

    fullscreen() { // 进入全屏
      var docElm = document.getElementById("homePageCards"); // 指定容器id
      if (!this.FullScreen) {
        this.zoom = 6.9;
        this.initMap();
        this.show = false;
        // 兼容W3C
        if (docElm.requestFullscreen) {
          docElm.requestFullscreen();
        } else if (docElm.mozRequestFullScreen) { // 兼容FireFox
          docElm.mozRequestFullScreen();
        } else if (docElm.webkitRequestFullScreen) { // 兼容Chrome等
          docElm.webkitRequestFullScreen();
        } else if (docElm.msRequestFullscreen) { // 兼容IE11
          docElm.msRequestFullscreen();
        }
      } else {
        this.zoom = 6.9;
        this.initMap();
        this.show = false;
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
        this.FullScreen = !this.FullScreen;
      }
    },
    init() {
      epgis.tokenTask.login(sjccKey.appkey, sjccKey.appsecret).then(res => { this.initMap(); });
    },
    // 申请的key和sn
    initMap() {
      const self = this;
      self.map = new epgis.Map({
        // 地图绑定的DOM元素ID
        container: "map",
        // 地图样式
        style: "aegis://styles/aegis/Streets",
        // 默认缩放层级
        maxZoom: 8,
        minZoom: 2.5,
        zoom: this.zoom,
        // 地图中心点
        // 荆门
        center: [112.20, 31.03],
        // 地图默认字体
        localIdeographFontFamily: "Microsoft YoHei"
        // renderWorldCopies: false
      });
      self.map.on("load", function (e) {
        // eslint-disable-next-line no-undef

        var districtTask = new epgis.DistrictTask();
        // 行政区划名称查询行政区划;
        districtTask.searchDistrict({
          keyword: "湖北省",
          // 建议直辖市取2，其他省份取1，提升请求速度
          subdistrict: 1,
          extension: true,
          isEncode: false
        }).then((result) => {
          let features = [];
          const featuresSymbol = [];
          let featuresPolygon = [];
          // 主要区分直辖市和其他省份;
          const district =
            result.districts[0].sub_districts.length == 1
              ? result.districts[0].sub_districts[0]
              : result.districts[0];
          const shape = district.shape;
          if (shape.type == "MultiPolygon") {
            // eslint-disable-next-line no-redeclare
            for (const o in shape.coordinates) {
              features = features.concat(shape.coordinates[o]);
            }
          } else {
            features.push(shape.coordinates[0]);
          }
          for (const o in district.sub_districts) {
            // 标注
            featuresSymbol.push({
              type: "Feature",
              geometry: {
                coordinates: district.sub_districts[o].center,
                type: "Point"
              },
              properties: {
                name: district.sub_districts[o].name
              }
            });
          }
          if (district.shape.type == "MultiPolygon") {
            // eslint-disable-next-line no-redeclare
            for (var o in district.shape.coordinates) {
              featuresPolygon = featuresPolygon.concat(district.shape.coordinates[o]);
            }
          } else {
            featuresPolygon = featuresPolygon.concat(district.shape.coordinates);
          }
          // 行政区画面;
          self.map.addLayer({
            id: "power-polygon",
            type: "fill",
            source: {
              type: "geojson",
              data: {
                type: "FeatureCollection",
                features: [
                  {
                    type: "Feature",
                    geometry: {
                      type: "Polygon",
                      coordinates: featuresPolygon
                    }
                  }
                ]
              }
            },
            paint: {
              "fill-color": "#dae4fa",
              "fill-opacity": 0.7
            }
          });
          // 行政区划边界线
          self.map.addLayer({
            id: "power-polygon-lines",
            type: "line",
            source: {
              type: "geojson",
              data: {
                type: "FeatureCollection",
                features: [
                  {
                    type: "Feature",
                    geometry: {
                      type: "MultiLineString",
                      coordinates: features
                    }
                  }
                ]
              }
            },
            paint: {
              "line-color": "#0864FC",
              "line-width": 2,
              "line-dasharray": [1, 1] // 控制虚线的疏密
            }
          });
          // 面标注
          self.map.addLayer({
            id: "power-polygen-symbol",
            type: "symbol",
            source: {
              type: "geojson",
              data: {
                type: "FeatureCollection",
                features: []
              }
            },
            layout: {
              "text-font": ["Microsoft YaHei Regular"],
              "text-field": "{name}",
              "text-size": 12
            },
            paint: {
              "text-color": "#A0A0A0"
            }
          });
          // 面标注数据
          self.map.getSource("power-polygen-symbol").setData({
            type: "FeatureCollection",
            features: featuresSymbol
          });
          // 绑定仓库弹窗
          self.popupInfoWindow = new epgis.Popup({
            closeButton: false,
            closeOnClick: false,
            anchor: "top-right",
            offset: [5, 10]
          });
          // 画点
          self.mapData.forEach((item) => {
            // let url = require("@/assets/img/fangzi.png");
            var url = null;
            if (item.warningLvCode == 4) {
              url = require("../../../../assets/map/red.png");
            } else if (item.warningLvCode == 3) {
              url = require("../../../../assets/map/orange.png");
            } else if (item.warningLvCode == 2) {
              url = require("../../../../assets/map/yellow.png");
            } else if (item.warningLvCode == 1) {
              url = require("../../../../assets/map/blue.png");
            }
            self.map.loadImage(url, (error, image) => {
              self.map.addImage(item.id + "poi", image);
              self.map.addLayer({
                id: item.id,
                type: "symbol",
                source: {
                  type: "geojson",
                  data: {
                    type: "FeatureCollection",
                    features: [
                      {
                        type: "Feature",
                        geometry: {
                          type: "Point",
                          coordinates: [Number((item.geo || "").split(",")[0]), Number((item.geo || "").split(",")[1])]
                        },
                        properties: {
                          name: "111"
                        }
                      }
                    ]
                  }
                },
                layout: {
                  "icon-image": item.id + "poi",
                  "icon-size": 0.3,
                  "icon-ignore-placement": true,
                  "text-ignore-placement": false,
                  "text-size": 12,
                  "text-anchor": "top",
                  "text-allow-overlap": false,
                  "icon-anchor": "center",
                  "text-offset": [0, 0],
                  "text-max-width": 8,
                  "text-font": ["Microsoft YaHei Regular"]
                },
                paint: {
                  "text-color": "#fff",
                  "text-halo-color": "#555252",
                  "text-halo-width": 3
                }
              });
            });
            // 监听鼠标进入事件
            self.map.on("mouseenter", item.id, function (e) {
              self.popupInfoWindow.setLngLat(e.features[0].geometry.coordinates)
                .setHTML(
                  `<div style="width:370px;height:130px;display:flex;flex-direction:column;padding:5px">
                    <div style="width:100%;height:25px;line-height:25px;text-align:center;">
                      <div style="font-size:17px;color:#fff;font-weight:700;">${item.judgeName}</div>
                    </div>
                    <div style="width:100%;display:flex;flex-direction:column;margin-top:20px">
                      <div style="width:100%;margin-bottom:8px;font-size:15px;color:#fff;display:flex;justify-content:space-between;">
                        <div style="width:50%;">预警级别：${item.warningLvName}</div>
                        <div style="width:50%;text-align:right">险情类别：${item.dangerName}</div>
                      </div>
                      <div style="width:100%;margin-bottom:8px;font-size:15px;color:#fff;display:flex"><p style="width:75px;">影响范围：</p><p style="flex:1">${item.effectRange}</p></div>
                      <div style="width:100%;margin-bottom:8px;font-size:15px;color:#fff;display:flex"><p style="width:75px;">影响时间：</p><p style="flex:1">${item.effectStartTime}至${item.effectEndTime}</p></div>
                    </div>
                  </div>`
                )
                .addTo(self.map);
            });

            // 监听鼠标移出事件
            self.map.on("mouseleave", item.id, function (e) {
              self.popupInfoWindow.remove();
            });
          });

        });
      });
      // self.map.addControl(
      //   new SGMap.ScaleControl({
      //     maxWidth: 80,
      //     unit: "metric"
      //   }),
      //   "bottom-left"
      // );
      // self.map.on("click", function (e) {
      //   self.popupInfoWindow.remove();
      //   console.log(123);
      // });
    }
  }
};

</script>

<style scoped lang="less">
.homePageCards {
  position: relative;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 2px;
  border-radius: 5px;
  #map {
    border-radius: 5px;
  }
}
.full-box {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: 700;
  z-index: 9;
  background-color: #fff;
  cursor: pointer;
  padding: 3px 8px;
  border-radius: 5px;

  img {
    width: 15px;
    height: 15px;
    margin-right: 5px;
  }
}
.full {
  position: absolute;
  bottom: 10px;
  right: 10px;
  z-index: 9;
  background-color: rgba(255, 255, 255, 0.654901960784314);
  .full-boxs {
    display: flex;
    align-items: center;
    font-size: 17px;
    font-weight: 600;
    z-index: 9;
    background-color: rgba(255, 255, 255, 0.654901960784314);
    cursor: pointer;
    padding: 3px 10px;
    border-radius: 5px;

    img {
      width: 15px;
      height: 15px;
      margin-right: 5px;
    }
  }
}
:deep(.epgis-popup-content) {
  width: 370px !important;
  height: 130px !important;
  border-radius: 3px !important;
  background-color: #7e8aa6 !important;
  opacity: 0.8;
  // background-image: url("../../../../assets/map/u5.png");
}
:deep(.epgis-popup-anchor-top-right .epgis-popup-tip) {
  border-bottom-color: #7e8aa6 !important;
  opacity: 0.8;
}
</style>
